<template>
	<view>
		<view class="top">
			
			<!-- <view class="money" v-if="user_get.money">
				{{user_get.money}}
			</view> -->
			<view class="face" :style="{'border-radius':radius}">
				<image v-if="hong_bao_detail.is_back == 0 && hong_bao_detail.sy_number!=0" src="../../../static/img/5.png":lazy-load="true"></image>
				<image v-if="hong_bao_detail.is_back != 0" src="../../../static/img/6.png":lazy-load="true"></image>
				<image v-if="hong_bao_detail.is_back == 0 && hong_bao_detail.sy_number==0" src="../../../static/img/7.png":lazy-load="true"></image>
				<!-- <image src="../st" mode=""></image> -->
			</view>
			<view class="blessing" v-if="hong_bao_detail.sy_number>0&& hong_bao_detail.is_back == 0">
				待{{my_data.id == receive_user_info.id?'你':receive_user_info.nickname}}收款
			</view>
			<view class="blessing" v-if="hong_bao_detail.sy_number==0">
				已收款，资金已存入零钱
			</view>
			<view class="blessing" v-if="hong_bao_detail.is_back != 0 && my_data.id != hong_bao_detail.user_id">
				你已退还
			</view>
			<view class="blessing" v-if="hong_bao_detail.is_back != 0 && my_data.id == hong_bao_detail.user_id&&hong_bao_detail.sy_number!=0">
				{{receive_user_info.nickname}}已退还
			</view>
			<view class="username">
				<!-- {{own_user_info.nickname}}的红包 -->
				￥{{hong_bao_detail.money}}
			</view>
			<view class="msg" v-if="my_data.id == hong_bao_detail.user_id&&hong_bao_detail.sy_number>0&&hong_bao_detail.is_back == 0">
				1天内对方未收款，将退还给你。
			</view>
		</view>
		<view class="info">
			<!-- 已领取{{hong_bao_detail.number - hong_bao_detail.sy_number}}/{{hong_bao_detail.number }}个，共{{(hong_bao_detail.money - hong_bao_detail.sy_money).toFixed(2)}}/{{hong_bao_detail.money}}元 -->
		</view>
		<view class="sayInfo">
			<view class="" style="display: flex;justify-content: space-between;width: 100%;">
				<view class="first">
					转账时间：
				</view>
				<view class="first-time">
					{{timestampToTime(hong_bao_detail.time+'')}}
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;width: 100%;" v-if="hong_bao_detail.receive_time!=''">
				<view class="first">
					收款时间：
				</view>
				<view class="first-time">
					{{timestampToTime(hong_bao_detail.receive_time+'')}}
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;width: 100%;" v-if="hong_bao_detail.msg">
				<view class="first">
					转账说明：
				</view>
				<view class="first-time">
					{{hong_bao_detail.msg}}
				</view>
			</view>
		</view>
		<view class="" v-if="hong_bao_detail.is_back == 0">
			<view class="btn" v-if="hong_bao_detail.sy_number>0 && my_data.id != hong_bao_detail.user_id" @tap="getZhuanZhang()">
				收款
			</view>
			<view class="msg" v-if="hong_bao_detail.sy_number>0 && my_data.id != hong_bao_detail.user_id">
				1天内未确认，将退还给对方。
				<view class="" style="color: #5b95e3;" @tap="returnZhuanZhang()">
					退还
				</view>
			</view>
		</view>
		
		

		
		<!-- <view class="list">
			<view class="row" v-for="(row,index) in list" :key="index">
				<view class="left">
					<image :src="staticPhoto+row.user_info.face"></image>
				</view>
				<view class="right">
					<view class="r1">
						<view class="username">
							{{row.user_info.nickname}}
						</view>
						<view class="money">
							{{row.money}}元
						</view>
					</view>
					<view class="r2">
						<view class="time">
							{{row.time}}
						</view>
						<view class="lucky" v-if="row.is_best">
							手气王
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import _get from '../../../common/_get';
	import _hook from '../../../common/_hook';
	import _data from '../../../common/_data';
	import _action from '../../../common/_action';
	export default {
		data() {
			return {
				hong_bao_detail:{},
				user_get:{},
				own_user_info:{},
				list:{},
				blessing:"恭喜发财",
				money:0.01,
				username:"大黑哥",
				receivedNumber:8,
				SumNumber:10,
				receivedMoney:5.43,
				SumMoney:10,
				my_data: {},
				receive_user_info:{},
				// receivedList:[
				// 	{username:"大黑哥", face:"/static/img/im/face/face_6.jpg",time:"2019-04-12 12:54:12",money:0.01,islucky:false},
				// 	{username:"路人甲", face:"/static/img/im/face/face_5.jpg",time:"2019-04-12 12:54:13",money:1.82,islucky:true},
				// 	{username:"高级黑", face:"/static/img/im/face/face_4.jpg",time:"2019-04-12 12:55:10",money:0.23,islucky:false},
				// 	{username:"低级黑", face:"/static/img/im/face/face_3.jpg",time:"2019-04-12 12:56:10",money:0.56,islucky:false},
				// 	{username:"大明哥", face:"/static/img/im/face/face_2.jpg",time:"2019-04-12 12:56:15",money:0.96,islucky:false},
				// 	{username:"小姐姐", face:"/static/img/im/face/face_1.jpg",time:"2019-04-12 12:56:17",money:1.02,islucky:false},
				// 	{username:"大哥哥", face:"/static/img/im/face/face_7.jpg",time:"2019-04-12 12:56:19",money:0.05,islucky:false},
				// 	{username:"抢红包", face:"/static/img/im/face/face_8.jpg",time:"2019-04-12 12:56:22",money:0.78,islucky:false}
				// ],
				//动画效果
				radius:'100% 100% 0 0',
				pageParams:{

				}
			};
		},
		computed:{
			staticPhoto() {
				return _data.staticPhoto();
			},
		},
		onShow(){
			let _this = this;
			_hook.routeSonHook();
			_this.getZhuanZhangDetail(_this.pageParams)
			_this.my_data = _data.data('user_info');
			console.log(_this.my_data,'_this.my_data')
			
		},
		onLoad(options) {
			let _this = this;
			_this.pageParams = options
			// _this.zhuanZhangDetail()
		},
		onPageScroll(e) {
			//e.scrollTop;
			if(e.scrollTop>100){return;}
			let radiusTmp = 100 - e.scrollTop;
			this.radius = radiusTmp+'% '+radiusTmp+'% 0 0';
		},
		methods:{
			getZhuanZhang(){
				let _this = this;
				_get.getZhuanZhang(_this.pageParams,function (res) {
				console.log(res,'resres')
				 if(res != []){
					 _this.getZhuanZhangDetail()
				 }
				});
			},
			returnZhuanZhang(){
				let _this = this;
				_get.returnZhuanZhang(_this.pageParams,function (res) {
				 if(res != []){
					 _this.getZhuanZhangDetail()
				 }
				});
			},
			getZhuanZhangDetail(){
				let _this = this;
				_get.getZhuanZhangDetail(_this.pageParams,function (res) {
					_this.hong_bao_detail = res.hong_bao_detail
					_this.receive_user_info = res.receive_user_info
					console.log(_this.receive_user_info.id,'_this.details',_this.my_data.id)
					// _this.list = res.list;
					// _this.own_user_info = res.own_user_info;
					// _this.hong_bao_detail = res.hong_bao_detail;
					// _this.user_get = res.user_get;
				});
			},
			timestampToTime (time) {
			  var date = new Date(time) 
			  var len = time.toString().length;
			  if(len < 13) {
				  var sub = 13 - len;
				  sub = Math.pow(10,sub);
				  date = new Date(time * sub);
			  }
			  var y = date.getFullYear() + '年';
			  var M = date.getMonth() + 1;
			  M = (M < 10 ? '0' + M : M) + '月';
			  var d = date.getDate();
			  d = (d < 10 ? '0' + d : d) + '日';
			  var h = date.getHours();
			  h = (h < 10 ? '0' + h : h) + ':';
			  var m = date.getMinutes();
			  m = (m < 10 ? '0' + m : m);
			  return y + M + d + h + m;
			}
		}
	}
</script>

<style lang="scss">
	view{
		// display: flex;
		flex-wrap: wrap;
	}
	.sayInfo{
		margin: 30rpx;
	}
	.msg{
		margin: 20rpx 160rpx;
		text-align: center;
		display: flex;
		color: #999;
		font-size: 27rpx;
	}
	.btn{
		width: 260rpx;
		height: 74rpx;
		border: 1px soild black;
		background: green;
		text-align: center;
		line-height: 74rpx;
		margin: 200rpx auto 0;
		border-radius: 11rpx;
		color: white;
	}
	.top{
		width: 100%;
		// background-color: #cf3c35;
		flex-wrap: wrap;
		.blessing,.money{
			width: 100%;
			color: #000;
			display: flex;
			// padding: 20upx 0;
			justify-content: center;
			font-size: 24upx;
		}
		.money{
			font-size: 24upx;
			// display: flex;
		}
		.face{
			// background-color: #fff;
			justify-content: center;
			width: 100%;
			height: 130upx;
			text-align: center;
			margin-top: 65upx;
			// border-radius: 100% 100% 0 0;
			// transition: border-radius .15s;
			// border: 1px soild green;
			image{
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
				margin-top: 10upx;
			}
		}
		.username{
			width: 100%;
			// justify-content: center;
			margin-left: 270rpx;
			// background-color: #fff;
			margin-top: 8upx;
			font-size: 70upx;
			font-weight: 500;
		}
	}
	.info{
		margin-top: 30upx;
		width: 96%;
		height: 50upx;
		padding-left: 4%;
		font-size: 28upx;
		color: #999;
		border-bottom: solid 1upx #dfdfdf;
	}
	.list{
		width: 100%;
		.row{
			width: 92%;
			padding: 0 4%;
			height: 120upx;
			border-bottom: solid 1upx #dfdfdf;
			justify-content:flex-start;
			flex-wrap: nowrap;
			.left{
				flex-shrink: 0;
				width: 100upx;
				height: 120upx;
				justify-content: flex-start;
				align-items: center;
				image{
					width: 80upx;
					height: 80upx;
					border-radius: 100%;
				}
			}
			.right{
				width: 100%;
				height: 150upx;
				
				.r1{
					width: 100%;
					height: 75upx;
					justify-content: space-between;
					align-items: center;
					font-size: 34upx;
				}
				.r2{
					width: 100%;
					height: 75upx;
					justify-content: space-between;
					font-size: 26upx;
					.time{
						color: #8F8F94;
					}
					.lucky{
						padding: 3upx 8upx;
						border-radius: 5upx;
						background-color: #F8D757;
						align-items: center;
						height: 30upx;
						font-size: 24upx;
						color: #CF3C35;
					}
				}
			}
		}
	}
</style>
